import { message } from 'antd';
import { FormEvent, useState } from 'react';
import FormContent from './FormContent';

const Form = (props: any) => {
  const { children } = props;
  const [values, setValues] = useState<Record<string, any>>({});
  const onValueChange = (key: string, value: any) => {
    //不用setstate是因为防止页面重新渲染
    values[key] = value;
  };
  const onFinish = (v: any) => {
    console.log('Success:', values);
    message.success('提交成功', values);
  };
  const handleSubmit = (v: FormEvent) => {
    //防止页面刷新
    v.preventDefault();
    onFinish(v);
  };
  return (
    <FormContent.Provider
      value={{ values, setValues: (v: any) => setValues(v), onValueChange }}
    >
      <form onSubmit={handleSubmit}>{children}</form>
    </FormContent.Provider>
  );
};
export default Form;
